<script>
export default {
  name: "sh-nav-bar",
  props: {
    select: {
      type: Number,
      default: 0
    },
    list:{
      type: Array,
      required: true,
      default: () => []
    },
    list2:{
      type: Array,
      required: true,
      default: () => []
    },
	count:{
      type: Number,
      default: 0
	}
  },
  created() {
  	this.initCart()
  },
  methods:{
	  initCart(){
		  if(!this.count){
		  	this.$http('common.initcart').then(res=>{
		  		this.cartCount = Number(res.data.count)
		  	})
		  }
	  },
    onChangePage(e){
      if(e == this.select) return
	  this.initCart()
      let routerArr = [
        {
          path: '/pages/index/index',
        },
        {
          path: '/pages/index/category',
        },
        {
          path: '/pages/index/news',
        },
        {
          path: '/pages/index/cart',
        },
        {
          path: '/pages/index/user',
        },
      ]
      uni.switchTab({
        url: routerArr[e].path
      })
    }
  },
  data(){
    return{
      options:{
        color: '#383838',
        activeColor: '#f76921',
      },
      textList:[
          '首页',
          '分类',
          '消息',
          '购物车',
          '我的',
      ],
	  cartCount:0
    }
  },
}
</script>

<template>
<view class="navbar">
  <view v-for="item,indexs in list" :key="indexs" class="icon-box" @click="onChangePage(indexs)">
    <view class="imgbox">
		<div class="tip-box" v-if="indexs == 3 && ( cartCount > 0 || count > 0 )">{{ count ? count : cartCount }}</div>
      <image :src="select == indexs ? list2[select] : item" mode="widthFix"></image>
    </view>
    <view class="texts" :style="{
      'color': select == indexs ? options.activeColor : options.color

    }">{{textList[indexs]}}</view>
  </view>
</view>
</template>

<style scoped lang="scss">
.navbar{
  width: 100%;
  height: 120rpx;
  position: fixed;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
  .icon-box{
    width: 100rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    //background: red;
    .imgbox{
	  position: relative;
      width: 60rpx;
      height: 60rpx;
      margin: 0;
      padding: 0;
      image{
        width: 100%;
        height: 100%;
      }
	  .tip-box{
		z-index: 5;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		top: -2rpx;
		right: -10rpx;
		background-color: red;
		font-size: 20rpx;
		color:#fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	  }
    }
    .texts{
      font-size: 24rpx;
    }
  }
}
</style>